

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>货道管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
  <link rel="stylesheet" href="layui/css/layui.css" media="all">
		<link rel="stylesheet" href="layui/css/admin.css" media="all">
</head>
<body>

  <div class="layui-fluid">
    <div class="layui-card">
      <div class="layui-card-header"><span style="font-size: 22px; font-weight: bold;">货道管理</span></div>
      <div class="layui-card-body" style="padding: 15px;">
     <div class="cargo-from">
				<form class="layui-form" action="">

					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">机器编号：</label>
							<div class="layui-input-inline">
								<input type="text" name="machineId" lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>
						
						<div class="layui-inline">
							<label class="layui-form-label">机器别名：</label>
							<div class="layui-input-inline">
								<input type="text" name="machineName" lay-verify="required" autocomplete="off" class="layui-input">
							</div>
						</div>
					</div>
					
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">机器组：</label>
							<div class="layui-input-inline">
								<select>
									<option value="">请选择组</option>
									<option selected="">全部</option>
									<option>珠江新城</option>
									<option>五羊新城</option>
									<option>......</option>
								</select>
							</div>
						</div>

						<div class="layui-inline" style=" margin-left: 110px;">
							<button class="layui-btn   select">查询</button>

							<button class="layui-btn  layui-btn-warm reset" type="reset">重置</button>
						</div>
					</div>
				</form>
			</div>

			<span style="font-size: 22px; font-weight: bold; margin-top: 30px;">机器列表</span>
			<table class="layui-hide" id="machine-list" lay-filter="demo" style="width: 761px;"></table>

			<script type="text/html" id="barDemo">
				<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">货道信息</a>
				<!--<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>-->
				<!--<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>-->
			</script>
      </div>
    </div>
  </div>

    
  <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script src="layui/layui.js"></script>
		<script>
			layui.use(['form', 'table'], function() {
				var form = layui.form,
					table = layui.table;

				table.render({
					elem: '#machine-list',
					height: 332,
					url: '/demo/table/user/' //数据接口
						,
					page: true //开启分页
						,
					cols: [
						[ //表头
							{
								field: 'id',
								title: '机器编号',
								width: 110,
								sort: true,
								fixed: 'left'
							}, {
								field: '',
								title: '机器别名',
								width: 110
							}, {
								field: '',
								title: '所属机器组',
								width: 110
							}, {
								field: '',
								title: '机器状态',
								width: 110
							}, {
								fixed: 'right',
								width: 85,
								align: 'center',
								toolbar: '#barDemo'
							}
						]
					]
				});
				table.on('tool(demo)', function(obj) { //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					var data = obj.data //获得当前行数据
						,
						layEvent = obj.event; //获得 lay-event 对应的值
					if(layEvent === 'detail') {
						//layer.msg('查看操作');
						window.location.href="Cargo-read.html";
					} else if(layEvent === 'del') {
						layer.confirm('真的删除行么', function(index) {
							obj.del(); //删除对应行（tr）的DOM结构
							layer.close(index);
							//向服务端发送删除指令
						});
					} else if(layEvent === 'edit') {
						layer.msg('编辑操作');
					}
				});

				

			});
			
			$(function(){
				$('#add').click(function(){
					debugger;
					window.location.href="machine-add.html";
				})
			})
		</script>
</body>
</html>
